<template>
  <div>

    <Table :columns="columns" :loading="loading" :data="tableData.data" :pagination="pagination"
      @on-selection-change="onSelect" :row-key="true"></Table>
    <div style="height: 25px;"></div>
    <Page style="text-align: right;" :total="tableData.count" :page-size="pagination.pageSize"
      @on-change="handlePagination" />
  </div>
</template>
  
<script>
import { defineEmits, shallowRef, getCurrentInstance, inject, nextTick, reactive, toRefs, toRef, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref, defineComponent, toRaw, watch } from 'vue'
import { useRouter, useRoute } from "vue-router";




export default defineComponent({

  props: ['formData'],//接收来自父组件的数据
  setup(props, context) {

    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法

    const tableData = ref({}); // 表格数据
    let loading = ref(true); // 表格数据


    let columns = [
      //表头数据
      { type: "selection", width: 70, align: "center" },
      { type: "index", width: 70, align: "center", title: "序号" },
      { title: '经营企业', minWidth: 210, key: 'deptName', tooltip: true, resizable: true, },
      { title: '经营类型', minWidth: 120, key: 'transportValue', tooltip: true, resizable: true, },
      { title: '法人代表', minWidth: 120, key: 'legalPerson', tooltip: true, resizable: true, },
      { title: '经营负责人', minWidth: 120, key: 'personCharge', tooltip: true, resizable: true, },
      { title: '负责人电话', minWidth: 120, key: 'personChargePhone', tooltip: true, resizable: true, },
      { title: '营业执照号', minWidth: 180, key: 'uniformSocialCreditCode', tooltip: true, resizable: true, },
    ];
    let pagination = ref({
      current: 1, // 当前页码
      pageSize: 10, // 每页显示的条数
      total: 0, // 数据总条数
      showSizeChanger: true, // 是否显示改变每页条数
      pageSizeOptions: ['10', '20', '50'], // 每页条数选项
    });
    let fetchData = () => {
      loading.value = true
      let transportCodeList
      console.log(props)
      if(props.formData.noticePublishDeptType != undefined){
        transportCodeList = props.formData.noticePublishDeptType //运输类型
      }else{
        transportCodeList = props.formData.noticePublishValueCode //运输类型
      } 
      
      
      
      // toDo  判断情况吧。根据 noticePublishDeptType  和  noticePublishValueCode 分别处理数据
      
      // if (typeof props.formData.noticePublishValueCode == "string") {
      //   transportCodeList = props.formData.noticePublishValueCode.split(",")
      // } else {
      //   transportCodeList = props.formData.noticePublishValueCode
      // }



      let noticePublishDeptValue = props.formData.noticePublishDeptValue //修改时候会有选中的数据然后把这个数据和接口的数据做对比有的话默认勾选   undefined是新增
      $axios.post(apiUrl.coreDeptCoreDeptList, {
        transportCodeList: transportCodeList, //根据运输类型不一样然后获取对应的数据
        typeCode: "1105", limit: pagination.value.pageSize, page: pagination.value.current,
      }).then((res) => {

        let result = res.data //获取企业数据
        if (noticePublishDeptValue != undefined) {
        
            
          let noticePublishDeptValueArr = noticePublishDeptValue.split(",")  //根据逗号分隔然后做对比
          let huiXianCheckList = [] //选中的数据
          result.data.forEach(element => {  //循环对比看看有没有选中的数据
         
            for (let i = 0; i < noticePublishDeptValueArr.length; i++) {
              if (element.uuid == noticePublishDeptValueArr[i]) { //如果两个UUid一样的话就勾选
                element._checked = true

                huiXianCheckList.push(element)
              }
            }
          });

          onSelect(huiXianCheckList)
        }


        tableData.value = result;
        loading.value = false
      })
    }

    let handlePagination = (current) => {
      pagination.value.current = current
      fetchData();
    }

    
    //监听运输类型不一样的话就重新获取数据最新类型的企业数据
    watch(() =>  props.formData.noticePublishValueCode , (news, old) => {
      fetchData() //监听运输类型不一样的话就重新获取数据最新类型的企业数据
      console.log("noticePublishValueCode")
    }, { deep: true });
    watch(() =>  props.formData.noticePublishDeptType , (news, old) => {
      fetchData() //监听运输类型不一样的话就重新获取数据最新类型的企业数据
      console.log("noticePublishDeptType")
    }, { deep: true });

    handlePagination(pagination.value.current);



    let selectList = {}  //暂存勾选的数据的id
    let onSelect = (list) => {
      // console.log("选择的数据",list)
      // if(list.length )
      // selectList.push(...selection)


      selectList['key' + pagination.value.current] = list

      // selection.map(id => selectList.push(id)); //只保留id
      // selection.disAddSelect = [...selectList].join(',');//转换为字符串

      // const uniqueArray = selectList.filter((obj, index, self) => {
      //   return index === self.findIndex((t) => (
      //     t.id === obj.id 
      //   ));
      // });
      context.emit('listenSonCompany', selectList)

    }







    return {
      loading,
      columns,
      tableData,
      pagination,
      handlePagination,
      onSelect,

    };
  }
});
</script>
  